<script setup>
import { reactive, defineProps, ref } from 'vue'
import { useUserStore } from '@/store'
const userStore = useUserStore();
const props = defineProps({
    type: {
        type: String,
        default: () => 'home'
    }
});
// 变量
const state = reactive({
    routerList: [{
        "path": "/pages/index/index",
        name: 'home',
        text: '首页',
        showList: [1, 2, 3]
    }, 
    // {
    //     "path": "/pages/todaysData/index",
    //     name: 'order',
    //     text: '数据统计',
    //     showList: [1]
    // }, 
    {
        "path": "/pages/team/index",
        name: 'user',
        text: '分享记录',
        showList: [1, 2, 3]
    }]
})
const statusBottomHeight = ref(0);
uni.getSystemInfo({
    success: function (info) {
        // 获取安全区域的 bottom 值，单位px
        let safeBottom = info.safeAreaInsets.bottom;
        statusBottomHeight.value = uni.upx2px(100) + safeBottom;
    }
});
/**
 * @property  所有请求以api开头 如:apiDataInfo	
 * */


/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */
const changeTabbarIndex = (item) => {
    // 跳转页面
    uni.switchTab({
        url: item.path,
    })
}
/**
 * @property 生命周期
 */


</script>
<template>
    <div style="width: 100%; bottom:0; z-index: 10;" class="fixed bg-[#fff] pl-3 pr-3" :style="{
        height: statusBottomHeight + 'px'
    }">
        <div style="width: 100%; height: 100rpx;" class="frb bg-f">
            <div v-for="item in state.routerList.filter(item => item.showList.includes(userStore?.info?.type))"
                :key="item.name" class="fc flex-col flex-1 " style="width: 20%;" @click="changeTabbarIndex(item)">
                <!-- <img :src="item.name === props.type ? imageIntroduction(item.imgAt) : imageIntroduction(item.img)"
                    alt="" style="width: 40rpx; height: 40rpx;"> -->
                <text class="ft24 mt-4" :style="{ color: item.name === props.type ? '#275EFF' : '#6C7075' }">
                    {{ item.text }}
                </text>
            </div>
        </div>

    </div>

</template>
<style lang="scss" scoped></style>